<template>
  <div class="vediojsplayer-content">
    <Modal v-model="playModal"  title="视频播放"  @on-ok="addOk"  @on-cancel="cancel" width="860px" :mask-closable="false" :closable="false">
    <div id="video-box" style="width:880px; height: 490px;">
      <div>
        <video id="vediojsplayer" class="video-js vjs-default-skin" autoplay controls preload="true" width="800" height="450" data-setup="{}" playbackRates="[0.5, 1, 1.5, 2]">
          <source src="" type="video/mp4">
        </video>
      </div>
    </div>
  </Modal>
</div>
</template>
<script>

  export default {
  name: 'VedioPlayer',
  components: {},
  data(){
    return{
      playModal: false,
      player: null,
      timeupdate:0,//播放时长改变
    }
  },
  watch: {
    playModal: function (nval, oval) {
      /** 关闭时 */
      if (oval==true && nval == false){
        this.player.pause();
      }
    }
  },
  methods:{
    play(vedioUrl){
      console.log("播放地址: %O",vedioUrl);
      //console.log("play()-->this.player: %O",this.player);
      this.player.pause();
      this.player.src(vedioUrl);
      this.player.load();
      //this.player.play();
      this.playModal=true;
    },
    addOk(){this.playModal=false;},
    cancel(){this.playModal=false;},
  },

  mounted(){
    //console.log("VediojsPlayer mounted()");
    //console.log("player: %O",this.player);
    let options={
      mydata: {
        username: 'mc-pro-player'
      },
      autoplay: true,
      source:{
        src:"",
        type:"video/mp4"
      },
      playbackRates:[0.5, 1, 1.5, 2],
      controlBar: {
        //fullscreenToggle:false,
        //volumeMenuButton:false
      }
    };
    let that=this;
    if (!!this.player){
      //console.log("videojs 已经初始化，啥也不用做！");
      return;
    }

    //console.log("VedioJsPlayer 初始化videojs=%o",window.videojs("vediojsplayer", options,function(){}));
    //alert("VedioJsPlayer");
    that.player=window.videojs("vediojsplayer", options,function(){
      this.on("loadstart",function(){
        console.log("开始请求数据 ");
      })
      this.on("progress",function(){
        console.log("正在请求数据 ");
      })
      this.on("loadedmetadata",function(){
        console.log("获取资源长度完成 ")
      })
      this.on("canplaythrough",function(){
        console.log("视频源数据加载完成");
        //that.player.play();
      })
      this.on("waiting", function(){
        console.log("等待数据")
      });
      this.on("play", function(){
        console.log("视频开始播放")
      });
      this.on("playing", function(){
        console.log("视频播放中")
      });
      this.on("pause", function(){
        console.log("视频暂停播放")
      });
      this.on("ended", function(){
        console.log("视频播放结束");
      });
      this.on("error", function(){
        console.log("加载错误")
      });
      this.on("seeking",function(){
        console.log("视频跳转中");
      })
      this.on("seeked",function(){
        console.log("视频跳转结束");
      })
      this.on("ratechange", function(){
        console.log("播放速率改变")
      });
      this.on("timeupdate",function(){
        that.timeupdate++;
        if (that.timeupdate>30){
          console.log("播放时长改变");
          that.timeupdate=0;
        }
      })
      this.on("volumechange",function(){
        console.log("音量改变");
      })
      this.on("stalled",function(){
        console.log("网速异常");
      });
    });
  },
  destroyed(){
    /** 如何填坑：这里一定要的 dispose
     *  player 不能设为null
     **/
    this.player.dispose();
    //console.log("VediojsPlayer destroyed()): %O",this.player);
  }
}
</script>
<style lang="less">
  @import "./VediojsPlayer";
</style>
